<template>
	<div>
		
		<div class="smp-result smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">工单申请</div>
				<!-- <div class="smp-panel_option">
					<el-link type="primary" size="mini" href="#/main/helpManage/fileManage">模板下载</el-link>
				</div> -->
			</div>
			<div class="smp_panel_body">
		
		
		<div class="smp-result smp_panel_1">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">基础信息</div>
			</div>
			<div class="smp_panel_body">
				<el-form :inline="false" label-width="130px" size="mini" ref="form" :model="form.requireApply"
					:disabled="form.applySystemCallList.length>0 || form.applyEnvironmentList.length>0 || form.applyServerList.length>0 || form.applySystemList.length>0 ||form.requireApply.id!=''"
					:rules="rules">

					<el-row>

						<el-col :span="8">
							<el-form-item label="工单类型:" prop="applyType">
								<el-select v-model="form.requireApply.applyType" style="width: 100%" placeholder="需求类型">
									<el-option v-for="item in dict('SMP0009')" :key="item.itemCode"
										:label="item.itemName" :value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="需求编号:" prop="qmsNo" v-if="form.requireApply.applyType!='04'">
								<!-- <el-input v-model="form.requireApply.qmsNo"></el-input> -->


								<el-select v-model="form.requireApply.qmsNo" style="width: 100%" filterable remote
									reserve-keyword placeholder="请输入需求编号或名称" :disabled="disabledField"
									:loading="qmsLoading" @change="qmsChange" :remote-method="getRequirementList" size="mini">
									<el-option v-for="item in requirelist" :key="item.qmsNo" :label="item.qmsNo"
										:value="item.qmsNo">
										<span style="float: left;margin-left: 3px;">{{ item.qmsNo }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.qmsName }}</span>
									</el-option>
								</el-select>

							</el-form-item>
						</el-col>

						<el-col :span="8" v-if="form.requireApply.qmsNo!='' && form.requireApply.applyType!='04'">
							<el-form-item label="需求名称:" prop="qmsName">
								<el-input v-model="form.requireApply.qmsName" disabled></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="8">
							<el-form-item label="主系统:" prop="mainSystemNo"
								v-if="form.requireApply.qmsNo!='' && form.requireApply.applyType!='04'">
						
								<el-select v-model="form.requireApply.mainSystemNo" style="width: 100%"
									placeholder="请选择主系统" disabled>
									<el-option v-for="item in systemListAll" :key="item.systemNo"
										:label="item.systemName" :value="item.systemNo">
										{{ item.systemName }}({{item.systemNo}})
										<!-- <span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
									<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span> -->
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>




						<el-col :span="8">
							<el-form-item label="计划发布日期:" prop="prodDate" v-if="form.requireApply.applyType!='04'">
								<el-date-picker value-format="yyyy-MM-dd hh:mm:ss" style="width: 100%"
									v-model="form.requireApply.prodDate" type="date" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="批次号:" prop="batchNum" v-if="form.requireApply.applyType!='04'">
								<el-select v-model="form.requireApply.batchNum" style="width: 100%" placeholder="批次号">
									<el-option v-for="item in dict('SMP0010')" :key="item.itemCode"
										:label="item.itemName" :value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>


						<el-col :span="8">
							<el-form-item label="申请系统:" prop="applySysNo"
								v-if="form.requireApply.applyType=='01'||form.requireApply.applyType=='02'||form.requireApply.applyType=='04'">

								<el-select v-model="form.requireApply.applySysNo" style="width: 100%"
									placeholder="请输入系统编号或名称">
									<el-option v-for="item in userSystemList" :key="item.systemNo"
										:label="item.systemName" :value="item.systemNo">
										{{ item.systemName }}({{item.systemNo}})
										<!-- <span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
									<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span> -->
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<!-- <el-col :span="8" v-if="form.requireApply.applyType=='02'">
							<el-form-item label="服务系统:" prop="regSysNo">
								<el-select v-model="form.requireApply.regSysNo" style="width: 100%" filterable remote
									reserve-keyword placeholder="请输入系统编号或名称" :remote-method="getsystems1"
									:disabled="form.applySystemCallList.length>0">
									<el-option v-for="item in systemList1" :key="item.systemNo" :label="item.systemName"
										:value="item.systemNo">
										{{ item.systemName }}({{item.systemNo}})
									</el-option>
								</el-select>
							</el-form-item>
						</el-col> -->

					</el-row>
				</el-form>
			</div>
		</div>

		<div class="smp-result smp_panel_1" v-if="form.requireApply.applyType=='04'">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">环境维护</div>
				<div class="smp-panel_option">
					<el-button @click="EnvironmentMaintenanceServer" type="primary" plain size="mini"
						>
						<i class="el-icon-circle-plus-outline"></i>
						添加
					</el-button>
				</div>
			</div>
			<div class="smp_panel_body">
				<el-table v-if="form.requireApply.applyType=='04' && list4show" :data="form.applyEnvironmentList "
					size="mini" stripe style="width: 100%">

					<el-table-column prop="requireType" label="环境操作" align="center">
						<template slot-scope="scope">
							{{scope.row.requireType|dictName('SMP0025')}}
						</template>
					</el-table-column>
					<el-table-column prop="systemNo" label="系统名称" align="center">
						<template slot-scope="scope">
							{{scope.row.systemNo|getSystemName}}({{scope.row.systemNo}})
						</template>
					</el-table-column>
					<el-table-column prop="hostName" label="主机名称" align="center" />

					<el-table-column prop="envirType" label="环境类型" align="center">
						<template slot-scope="scope">
							{{scope.row.envirType|dictName("SMP0026")}}
						</template>
					</el-table-column>
					<el-table-column prop="esbAddr" label="关联ESB环境" align="center">
						<template slot-scope="scope">
							<!-- {{scope.row.esbAddr|dictName('SMP0016')}} -->
							{{scope.row.esbAddr|getESBEnvironment(that)}} 
						</template>
					</el-table-column>
					<el-table-column prop="systemCurrentAddr" label="系统环境" align="center" />
					<el-table-column prop="systemTargetAddr" label="系统目标环境" align="center"></el-table-column>

					<el-table-column label="操作" align="center" width="150">
						<template slot-scope="scope">
							<el-link v-if="scope.row.requireType == '02'" size="mini" type="primary" :underline="false"
								style="font-size: 12px;" @click="handleEdit4(scope.$index, scope.row)">修改</el-link>
								
								 <el-divider direction="vertical"  v-if="scope.row.requireType == '02'"></el-divider>
								
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="delrole4(scope.$index, scope.row)">删除</el-link>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<div class="smp-result smp_panel_1" v-if="form.requireApply.applyType=='03'">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">系统维护</div>
				<div class="smp-panel_option">
					<el-button @click="createApplySystem" type="primary" size="mini" plain
						>
						<i class="el-icon-circle-plus-outline"></i>
						添加
					</el-button>
				</div>
			</div>
			<div class="smp_panel_body">
				<el-table v-if="form.requireApply.applyType=='03' && list1show" :data="form.applySystemList"
					size="mini" stripe border style="width: 100%">

					<el-table-column prop="systemNo" label="系统编号" align="center"></el-table-column>
					<el-table-column prop="systemName" label="系统名称" align="center"></el-table-column>
					<el-table-column prop="systemType" label="系统类别" align="center">
						<template slot-scope="scope">
							{{scope.row.systemType|dictName("SMP0014")}}
						</template>
					</el-table-column>
					<el-table-column prop="systemOrg" label="所属机构" align="center">
						<template slot-scope="scope">
							{{scope.row.systemOrg|getOrgNameByOrgCode}} 
						</template>
					</el-table-column>
					<el-table-column prop="esbAddr" label="ESB测试IP" align="center">
						<template slot-scope="scope">
							<!-- {{scope.row.esbAddr|dictName("SMP0016")}} -->
							{{scope.row.esbAddr|getESBEnvironment(that)}} 
						</template>
					</el-table-column>
					<el-table-column prop="testAddr" label="测试应用IP" align="center"></el-table-column>
					<!-- <el-table-column prop="prodAddr" label="生产应用IP" align="center"></el-table-column> -->
					<el-table-column prop="requireType" label="申请类型" align="center">
						<template slot-scope="scope">
							<el-tag size="mini" effect="plain" type="success" style="width: 60px; text-align: center;">
								{{scope.row.requireType|dictName('SMP0013')}}
							</el-tag>
						</template>
					</el-table-column>

					<el-table-column label="操作" align="center" width="150">
						<template slot-scope="scope">
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="handleEdit1(scope.$index, scope.row)">修改</el-link>
								<el-divider direction="vertical"></el-divider>
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="delrole1(scope.$index, scope.row)">删除</el-link>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<div class="smp-result smp_panel_1   createApplyServer" v-if="form.requireApply.applyType=='01'">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">服务维护</div>
				
				<div class="smp-panel_option">
					
					<el-button @click="createApplyServer" type="primary" plain size="mini"
						>
						<i class="el-icon-circle-plus-outline"></i>
						添加
					</el-button>
					<el-upload style="display: none;" :on-change="changeFile2" :show-file-list="false" :limit="1"
						multiple :auto-upload="false" :file-list="fileList2" action="#">
						<el-button ref="importServerButton" type="success" size="mini"
							>
							<i class="el-icon-upload"></i>
							导入
						</el-button>
					</el-upload>

					<el-button @click="importServer"  size="mini"
						>
						<i class="el-icon-upload"></i>
						导入
					</el-button>
					
					<el-link @click="downTemplate" type="primary"  size="mini" :underline="false"  style="margin-right:10px;float:right;"
						>
						
						最新模板
						 <i class="el-icon-download"></i>
					</el-link>
					
					<div style="float:right">
						<el-alert type="warning" show-icon  :closable="false" style="line-height: 27px;background-color: #fff;padding:8px 0px">
							<template  slot="title" >
								服务维护模板已更新至{{templatVersion}},请使用
							</template>
						</el-alert>
					</div>
					
					
					
				
					
				</div>
			</div>
			<div class="smp_panel_body">
				<el-table v-if="form.requireApply.applyType=='01' && list2show"
					:data="form.applyServerList.slice((applyServerListCurrentPage-1)*applyServerListPageSize,applyServerListCurrentPage*applyServerListPageSize)"
					size="mini" stripe style="width: 100%">

					<el-table-column prop="transCode" label="交易码" align="center"></el-table-column>
					<el-table-column prop="transName" label="交易名称" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column prop="systemNo" label="服务系统" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							{{scope.row.systemNo|getSystemName}}({{scope.row.systemNo}})
						</template>
					</el-table-column>
					<el-table-column prop="msgAgreement" label="报文协议" align="center" width="100"></el-table-column>
					<el-table-column prop="msgCode" label="报文编码" align="center" width="100">
						<template slot-scope="scope">
							{{scope.row.msgCode|dictName('SMP0004')}}
						</template>
					</el-table-column>
					<el-table-column prop="httpMethed" label="http请求方法" align="center" width="100"></el-table-column>
					<el-table-column prop="testAddr" show-overflow-tooltip label="测试URL" align="center">
					</el-table-column>
					<!-- <el-table-column prop="prodAddr" show-overflow-tooltip label="生产URL" align="center"> -->
					</el-table-column>
					<el-table-column prop="outShow" label="外部可见" align="center" width="100">
						<template slot-scope="scope">
							{{scope.row.outShow|dictName('SMP0015')}}
						</template>
					</el-table-column>
					<!-- <el-table-column prop="funIntr" show-overflow-tooltip label="功能简介"></el-table-column>

 -->
					<el-table-column prop="requireType" label="申请类型" align="center" width="100">
						<template slot-scope="scope">
							<el-tag size="mini" effect="plain" type="success" style="width: 60px; text-align: center;">
								{{scope.row.requireType|dictName('SMP0013')}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="newTransCode" label="新交易码" align="center"></el-table-column>
					<el-table-column label="操作" align="center" width="150">
						<template slot-scope="scope">
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="handleEdit2(scope.$index, scope.row)">修改</el-link> 
								<el-divider direction="vertical" ></el-divider>
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="delrole2(scope.$index, scope.row)">删除</el-link>
						</template>
					</el-table-column>
				</el-table>
				<div class="smp-pagination" v-if="form.requireApply.applyType=='01' && list2show">
					<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper"
						:page-size="applyServerListPageSize" :page-sizes="[5,10,20]"
						:total="form.applyServerList.length" :current-page="applyServerListCurrentPage"
						@current-change="applyServerListCurrentChange" @size-change="applyServerListSizeChange">
					</el-pagination>
				</div>

			</div>
		</div>


		<div class="smp-result smp_panel_1" v-if="form.requireApply.applyType=='02'">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">服务调用</div>
				<div class="smp-panel_option">
					<el-button :disabled="form.requireApply.regSysNo==''" @click="createApplySystemCall" type="primary"
						size="mini" plain >
						<i class="el-icon-circle-plus-outline"></i>
						新增调用
					</el-button </div>
					
					<el-button :disabled="form.requireApply.regSysNo==''" @click="deleteApplySystemCall" 
						size="mini"  >
						<i class="el-icon-remove-outline"></i>
						解除调用
					</el-button </div>
					
				</div>
			</div>
			<div class="smp_panel_body">
				<el-table v-if="form.requireApply.applyType=='02'&& list3show"
					:data="form.applySystemCallList.slice((applySystemCallListCurrentPage-1)*applySystemCallListPageSize,applySystemCallListCurrentPage*applySystemCallListPageSize)"
					size="mini" stripe style="width: 100%">
					<!-- <el-table-column prop="pubCode" label="P值"></el-table-column> -->
					<el-table-column prop="regCode" label="服务编码(R)" align="center"></el-table-column>
					<el-table-column prop="transCode" label="交易码" align="center"></el-table-column>
					<el-table-column prop="transName" label="交易名称" align="center"></el-table-column>
					<el-table-column prop="regSysCode" label="服务系统" align="center">
						<template slot-scope="scope">
							{{scope.row.regSysCode|getSystemName}}({{scope.row.regSysCode}})
						</template>
					</el-table-column>

					<el-table-column prop="pubSysCode" label="消费系统" align="center">
						<template slot-scope="scope">
							{{scope.row.pubSysCode|getSystemName}}({{scope.row.pubSysCode}})
						</template>
					</el-table-column>
					<!-- <el-table-column prop="channel" label="渠道号"></el-table-column> -->
					<el-table-column prop="msgAgreement" label="消费方报文格式" align="center"></el-table-column>
					<el-table-column prop="msgCode" label="消费方字符编码" align="center">
						<template slot-scope="scope">
							{{scope.row.msgCode|dictName('SMP0004')}}
						</template>
					</el-table-column>
					<!-- <el-table-column prop="proty" label="代理路径"></el-table-column> -->
					
					<el-table-column prop="requireType" label="申请类型" align="center">
						<template slot-scope="scope">
							<el-tag size="mini" effect="plain" type="success" style="width: 60px; text-align: center;">
								{{scope.row.requireType|dictName('SMP0013')}}
							</el-tag>
						</template>
					</el-table-column>
					

					<el-table-column label="操作" align="center" width="150">
						<template slot-scope="scope">
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="handleEdit3(scope.$index, scope.row)">修改</el-link>
								<el-divider direction="vertical" ></el-divider>
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="delrole3(scope.$index, scope.row)">删除</el-link>
						</template>
					</el-table-column>
				</el-table>

				<div class="smp-pagination" v-if="form.requireApply.applyType=='02'&& list3show">
					<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper"
						:page-size="applySystemCallListPageSize" :page-sizes="[5,10,20]"
						:total="form.applySystemCallList.length" :current-page="applySystemCallListCurrentPage"
						@current-change="applySystemCallListCurrentChange" @size-change="applySystemCallListSizeChange">
					</el-pagination>
				</div>

			</div>
		</div>
		
		
			<div class="smp-result smp_panel_1">
				<div class="smp_panel_header">
					<div class="smp_panel_pre"></div>
					<div class="smp_panel_title">附件信息</div>
				</div>
				<div class="smp_panel_body">
					<el-form :inline="false" label-width="130px" size="mini" ref="form1">
						<el-row>
							<el-col :span="8">
								<el-form-item label="附件:" prop="aa" style="text-align: left;">
									<el-upload :on-change="changeFile" :before-upload="beforUpload"
										:show-file-list="false" multiple :auto-upload="false" :file-list="fileList"
										action="#">
										<!-- <i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖至此处或<em>点击上传</em></div> -->
										<el-button style="width: 200px;" ><i class="el-icon-upload" />添加附件
										</el-button>
									</el-upload>
									<div v-for="item in fileList" class="fileList">
										<el-link @click="downFile(item)" type="primary" :underline="false"><i
												class="el-icon-document"></i> {{item.name}}</el-link>
										<el-link type="success" @click="deleteFile(item)" :underline="false"
											style="float: right;">
											<i class="el-icon-close"></i>
										</el-link>
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="8">
									<el-link @click="downTemplate1"  size="mini" :underline="false"  style="margin-right:10px;float:left;"
										>
										<i class="el-icon-download"></i>
										系统接口申请表(模板)
									</el-link>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>
	</div>
	<div class="smp_panel_footer" style="padding:0px">
	<template
		v-if="form.applySystemList.length>0 || form.applyServerList.length>0||form.applySystemCallList.length>0 || form.applyEnvironmentList.length>0">
		<el-button @click="onSubmit" type="primary" size="mini" plain >
			<!-- <i class="el-icon-check"></i> -->
			提交
		</el-button>
		<el-button @click="onSave" size="mini" plain v-if="form.requireApply.status!='0'" style="margin-top:7px;margin-bottom: 7px;">
			保存</el-button>
			
	</template>
	
	<el-button style="margin-top:7px;margin-bottom: 7px;" v-if="form.requireApply.id !='' && form.requireApply.status!='0'" @click="onReject" size="mini" plain>
		撤销</el-button>
	</div>
		
		</div>
	
		

		<addApplySystem ref="addApplySystem" @addApplySystem="addApplySystem" @updateApplySystem="updateApplySystem" />
		<addApplyServer ref="addApplyServer" @addApplyServer="addApplyServer" @updateApplyServer="updateApplyServer" />
		<addApplySystemCall ref="addApplySystemCall" @addApplySystemCall="addApplySystemCall"
			@updateApplySystemCall="updateApplySystemCall" />
		<environmentMaintenanceServer ref="environmentMaintenanceServer" @addEnvirInfo="addEnvirInfo"
			@updateEnvirInfo="updateEnvirInfo" />
		<serviceView ref="serviceView" :dialogVisible="serviceViewVisible" @addApplySystemCall="addApplySystemCall">
		</serviceView>
		
		<serviceViewDel ref="serviceViewDel" @delApplySystemCall="delApplySystemCall"></serviceViewDel>
		
	</div>
</template>

<script>
	"use strict";
	import {
		createProcess
	} from '@/api/process.js';
	import {
		getRequirementInfoList
	} from '@/api/requirementInfo.js';
	
	
		import { getRequirementBatchNum } from '@/api/requirementBatch.js'
	
	import {getFileDown} from '@/api/help.js';
	
	import {getEsbEnvironmentByEsbFlg} from '@/api/environment.js';
	  
	import addApplySystem from './addApplySystem';
	import addApplyServer from './addApplyServer';
	import addApplySystemCall from './addApplySystemCall';
	import serviceView from './serviceView';
	import serviceViewDel from './serviceViewDel';
	import environmentMaintenanceServer from './environmentMaintenanceServer';
	import {
		addAll,
		saveAll,
		delAll,
		selectAllByApplyId,
		addAppendix,
		appendixDown,
		getFileByExcel,
	} from '@/api/demand.js';
	import {
		selectSystemInfoByResponsibleMan
	} from '@/api/system.js';
	import {
		getTemplateversion
	} from '@/api/service.js';

	export default {

		components: {
			addApplySystem,
			addApplyServer,
			addApplySystemCall,
			environmentMaintenanceServer,
			serviceView,
			serviceViewDel
		},

		data() {
			return {
				esbEnvironmentList: [],
				that:this,
				fileList: [],
				fileList2: [],
				qmsLoading: false,
				id: '',
				row: {},
				list1show: true,
				list2show: true,
				list3show: true,
				list4show: true,
				disabledField: false,
				serverCheck: '',
				templatVersion:'V1.0.0',
				form: {
					requireApply: {
						id: '',
						qmsNo: '',
						applyType: '01',
						prodDate: '',
						processId: '01',
						mainSystemNo: '',
						applySysNo: '',
						regSysNo: '',
						batchNum: '01'
					},
					applySystemList: [],
					applyServerList: [],
					applySystemCallList: [],
					applyEnvironmentList: []
				},

				applyServerListCurrentPage: 1,
				applyServerListPageSize: 5,
				applySystemCallListCurrentPage: 1,
				applySystemCallListPageSize: 5,

				dialogVisible: false,
				options: [],
				requireNooptions: [],
				rules: {
					qmsNo: [{
						required: true,
						message: '请输入需求编号',
						trigger: ['blur', 'change']
					}],
					qmsName: [{
						required: true,
						message: '请输入需求名称',
						trigger: ['blur', 'change']
					}],
					prodDate: [{
						required: true,
						message: '请选择计划上线日期',
						trigger: ['blur', 'change']
					}],
					applySysNo: [{
						required: true,
						message: '请选择申请系统',
						trigger: ['blur', 'change']
					}],
					regSysNo: [{
						required: true,
						message: '请选择服务系统',
						trigger: ['blur', 'change']
					}],
					batchNum: [{
						required: true,
						message: '请选择批次号',
						trigger: ['blur', 'change']
					}],
					applyType: [{
						required: true,
						message: '请选择工单类型',
						trigger: ['blur', 'change']
					}],

				},
				disabledForm: false,
				requirelist: [],
				userSystemList: [],
				systemList1: [],
				serviceViewVisible: false,
			};
		},
		created() {

			//this.$store.dispatch('setTabLock',true)
			this.init();
			this.getVersion();
			
		},
		
		filters: {
			getESBEnvironment: function(ip,that) {
			
				let esbEnvironment =  that.esbEnvironmentList.filter(item=>item.ip==ip)[0];
				return esbEnvironment.ip +"(" + that.dictName(esbEnvironment.esbFlg,'SMP0031') +")";
			}
		},
				
		methods: {
			
			getVersion(){
				getTemplateversion().then(res=>{
						this.templatVersion = res.data.extend;
				})
			},
			
			//下载模板
			downTemplate(){
				getFileDown({"fileName": "服务维护(模板)_"+this.templatVersion+".xlsx"}).then(res => {
					let name = "服务维护(模板)_"+this.templatVersion+".xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name:  "服务维护(模板)_"+this.templatVersion+".xlsx", // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download',name);
					
					if(typeof aLink.download==='undefined'){
						aLink.setAttribute('target','_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},
			
			//下载模板
			downTemplate1(){
				getFileDown({"fileName": "系统接口申请表.docx"}).then(res => {
					let name = "系统名称_需求编号_接口申请表.docx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name:  "系统名称_需求编号_接口申请表.docx", // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download',name);
					
					if(typeof aLink.download==='undefined'){
						aLink.setAttribute('target','_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},
			
			init(){
				selectSystemInfoByResponsibleMan().then(response => {
					this.userSystemList = response.data.extend;
					
					let qmsNo = this.$route.query.qmsNo;
					
					if (qmsNo != undefined) {
						this.getsystems('');
						this.disabledField = true;
						this.form.requireApply.qmsNo = qmsNo;
						let qmsName = this.$route.query.qmsName;
						let applySysNo = this.$route.query.applySystemNo;
						if(applySysNo != undefined && applySysNo != ''){
							if(this.userSystemList.filter(item=>item.systemNo==applySysNo).length>0){
								this.form.requireApply.applySysNo = applySysNo;
							}else{
								this.$message.warning("未匹配到申请系统，请重新选择申请系统");
							}
						}
						
						let mainSystemNo = this.$route.query.systemNo;
						this.form.requireApply.mainSystemNo = mainSystemNo;
				
						this.form.requireApply.qmsName = qmsName;
					}
					
					this.row = this.$route.query;
					
					this.form.requireApply.id = this.row.sid
					
					if (this.form.requireApply.id == undefined) {
						this.form.requireApply.id = '';
					}
					this.id = this.row.sid
					
					if (this.form.requireApply.id == null || this.form.requireApply.id == "" || this.form.requireApply.id ==
						'undefined') {
						//可编辑
						this.disabledForm = false;
					} else {
						//不可编辑
						this.getsystems('');
						this.getsystems1('');
						this.disabledForm = true;
						this.getList();
						this.$store.commit('SET_SUBTITLE', "--" + this.form.requireApply.id);
					};
					this.getEsbEnvironmentList();	
				});
			},

			getEsbEnvironmentList() {
				getEsbEnvironmentByEsbFlg({}).then(response => {
					this.esbEnvironmentList = response.data.extend;
				})
			},

			applyServerListCurrentChange(val) {

				this.applyServerListCurrentPage = val
			},
			applyServerListSizeChange(val) {
				this.applyServerListCurrentPage = 1
				this.applyServerListPageSize = val
			},

			applySystemCallListCurrentChange(val) {

				this.applySystemCallListCurrentPage = val
			},
			applySystemCallListSizeChange(val) {
				this.applySystemCallListCurrentPage = 1
				this.applySystemCallListPageSize = val
			},


			getsystems1(val) {
				if (val != '') {
					this.systemList1 = this.systemListAll.filter(item => {
						return item.systemNo.indexOf(val) != -1 || item.systemName.indexOf(val) != -1;
					})

				} else {
					this.systemList1 = this.systemListAll;
				}

			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},

			changeFile(file, fileList) {
				//file.href=window.URL.createObjectURL(file.raw);
				//console.info(file.href);
				this.fileList = this.fileList.filter(item => {
					return item.name != file.name
				})
				this.fileList.push(file);

			},

			beforUpload(file) {
				console.info("eee");
				let fileList1 = this.fileList.filter(item => {
					return item.name == file.name
				})
				if (fileList1.length > 0) {
					this.$message.error("附件已存在，请删除原有附件后上传");
					return false;
				}
			},

			deleteFile(file) {
				this.fileList = this.fileList.filter(item => {
					return item.name != file.name
				})
			},

			downFile(file) {
				console.info(file.raw)
				if (file.raw == undefined) {
					console.info("后台下载文件");
					appendixDown({
						fileName: file.name,
						applyId: this.form.requireApply.id
					}).then(res => {

						let name = file.name;
						/* let file = {
							uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
							name: file.name, // 文件名
							status: 'done', // 状态有：uploading done error removed
						} */
						const blob = new Blob([res.data]);
						const blobURL = window.URL.createObjectURL(blob);
						const aLink = document.createElement('a');
						aLink.href = blobURL;
						aLink.setAttribute('download', name);

						if (typeof aLink.download === 'undefined') {
							aLink.setAttribute('target', '_blank');
						}
						aLink.style.display = 'none';
						document.body.appendChild(aLink);
						aLink.click();
						document.body.removeChild(aLink);
						window.URL.revokeObjectURL(blob);

						/* 	
							let href=window.URL.createObjectURL(res.data);
							let a = document.createElement("a");
							a.download = file.name;
							a.href = href;
							a.setAttribute("target","_blank");
							a.click();
							window.URL.revokeObjectURL(href); */
					})
				} else {
					let name = file.name;
					/* let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: file.name, // 文件名
						status: 'done', // 状态有：uploading done error removed
					} */
					//const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(file.raw);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);

					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(file.raw);

					/* let href=window.URL.createObjectURL(file.raw);
					let a = document.createElement("a");
					a.href = href;
					a.target="_blank";
					a.click();
					window.URL.revokeObjectURL(href); */
				}

			},

			//提交
			onSubmit() {
				//如果是农商行系统附件必输
				
				
			
			if(this.form.requireApply.applyType=='02'||this.form.requireApply.applyType=='04'){
				let system = this.$store.getters.getSystem(this.form.requireApply.applySysNo);
				if(system.systemType=='02'){
					if(this.fileList.length==0){
						this.$message.error("请上传附件申请表，文件名格式：农商行名称_需求号_接口申请表");
						return;
					}else{
						let flg = false;
						this.fileList.forEach(file => {
							if(file.name.includes("接口申请表")){
								flg = true;
							}
						})
						
						if(!flg){
							this.$message.error("请上传附件申请表，文件名格式：农商行名称_需求号_接口申请表");
							return;
						}
					}
				}
			}
				addAll(this.form).then(response => {
					if (response.data.code == "0000") {
						let data = new FormData();

						//提交附件信息
						this.fileList.forEach(file => {
							console.info(file);
							if (file != undefined) {
								data.append("files", file.raw);
							}

						})

						this.fileList.forEach(file => {
							console.info(file);
							data.append("fileNameList", file.name);
						})
						data.append("applyId", response.data.extend);

						addAppendix(data).then(res => {
							if (res.data.code == "0000") {
								let panel = {key:this.$route.path};
								 this.$store.dispatch('removePanel', panel).then(()=>{
									 this.$message.success(response.data.message);
									 this.$store.dispatch('setTabLock', false);
									 this.$router.push({
									 	name: 'demandList'
									 })
								 })
							} else {
								this.$message.error(response.data.message);
							}
						});

					} else {
						this.$message.error(response.data.message);
					}
				}).catch(error => {
					this.$message.error(error.message);
				});
			},

			//保存
			onSave() {
				if(this.form.requireApply.applyType=='02'){
				let system = this.$store.getters.getSystem(this.form.requireApply.applySysNo);
				if(system.systemType=='02'){
					if(this.fileList.length==0){
						this.$message.error("请上传附件申请表，文件名格式：农商行名称_需求号_接口申请表");
						return;
					}else{
						let flg = false;
						this.fileList.forEach(file => {
							if(file.name.includes("接口申请表")){
								flg = true;
							}
						})
						
						if(!flg){
							this.$message.error("请上传接口申请表,文件名格式：农商行名称_需求号_接口申请表");
							return;
						}
					}
				}
				}
				saveAll(this.form).then(response => {
					if (response.data.code == "0000") {
						let data = new FormData();

						//提交附件信息
						this.fileList.forEach(file => {
							console.info(file);
							data.append("files", file.raw);
						})
						this.fileList.forEach(file => {
							console.info(file);
							data.append("fileNameList", file.name);
						})
						data.append("applyId", response.data.extend);

						addAppendix(data).then(res => {
							if (res.data.code == "0000") {
								this.$message.success(response.data.message);
								
								let panel = {key:this.$route.path};
								 this.$store.dispatch('removePanel', panel).then(()=>{
								 this.$store.dispatch('setTabLock', false);
								this.$router.push({
									name: 'mytask'
								})
									})

							} else {
								this.$message.error(response.data.message);
							}
						});
					} else {
						this.$message.error(response.data.message);
					}
				}).catch(error => {
					this.$message.error(error.message);
				});
			},

			//撤销
			onReject() {
				if (this.form.requireApply.id != null && this.form.requireApply.id != "") {
				
					delAll(this.form.requireApply).then(response => {
						if (response.data.code == "0000") {
							this.$message.success(response.data.message);
							let panel = {key:this.$route.path};
							 this.$store.dispatch('removePanel', panel).then(()=>{
								this.$router.push({
									name: 'demandList'
								}) 
							 })
							
						} else {
							this.$message.error(response.data.message);
						}
					}).catch(error => {
						this.$message.error(error.message);
					});
				}
			},

			handleClick() {
				this.dialogVisible = true;
			},

			reset() {
				this.$refs["form.requireApply"].resetFields();
			},



			handleEdit1(index, row) {
				let row1 = {};
				Object.assign(row1, row);
				this.$refs.addApplySystem.showDialog2(row1, index);
			},

			delrole1(index, row) {
				this.form.applySystemList.splice(index, 1);
			},

			handleEdit2(index, row) {
				let row2 = {};
				Object.assign(row2, row);

				let index1 = (this.applyServerListCurrentPage - 1) * this.applyServerListPageSize + index;
				this.$refs.addApplyServer.showDialog2(this.form.requireApply,row2, index1);
			},

			delrole2(index, row) {
				let index1 = (this.applyServerListCurrentPage - 1) * this.applyServerListPageSize + index;
				this.form.applyServerList.splice(index1, 1);
				if ((this.applyServerListCurrentPage - 1) * this.applyServerListPageSize >= this.form.applyServerList
					.length) {
					this.applyServerListCurrentPage = this.applyServerListCurrentPage - 1;
				}
			},

			handleEdit3(index, row) {
				let row3 = {};
				Object.assign(row3, row);
				let index1 = (this.applySystemCallListCurrentPage - 1) * this.applySystemCallListPageSize + index;
				this.$refs.addApplySystemCall.showDialog2(row3, index1);
			},

			delrole3(index, row) {
				let index1 = (this.applySystemCallListCurrentPage - 1) * this.applySystemCallListPageSize + index;
				this.form.applySystemCallList.splice(index1, 1);
				if ((this.applySystemCallListCurrentPage - 1) * this.applySystemCallListPageSize >= this.form
					.applySystemCallList.length) {
					this.applySystemCallListCurrentPage = this.applySystemCallListCurrentPage - 1;
				}
			},

			handleEdit4(index, row) {
				let row4 = {};
				Object.assign(row4, row);
				// alert("修改按钮的index：" + index)
				this.$refs.environmentMaintenanceServer.showDialog2(row4, index);
			},

			delrole4(index, row) {
				this.form.applyEnvironmentList.splice(index, 1);
			},

			//添加
			createApplySystem() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						this.$refs.addApplySystem.showDialog(this.form.requireApply.id);
					} else {
						return false;
					}
				});

			},

			//环境维护
			EnvironmentMaintenanceServer() {
				// this.$refs.environmentMaintenanceServer.showDialog();
				
				this.$refs["form"].validate(valid => {
					if (valid) {
						this.$refs.environmentMaintenanceServer.showDialog(this.form.requireApply.applySysNo);
					} else {
						return false;
					}
				});
			},

			importServer() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						this.$refs.importServerButton.$el.click();
					} else {
						return false;
					}
				});
			},

			addApplySystem(item) {
				this.form.applySystemList.push(item);
			},

			addEnvirInfo(item) {
				let obj = this.form.applyEnvironmentList.filter((applyEnvironment, index) => {
					return applyEnvironment.systemNo == item.systemNo && applyEnvironment.hostName == item
						.hostName &&
						applyEnvironment.envirType == item.envirType && applyEnvironment.esbAddr == item.esbAddr &&
						applyEnvironment.systemCurrentAddr == item.systemCurrentAddr
				})

				if (obj.length == 0) {
					this.form.applyEnvironmentList.push(item);
				} else {
					this.$message({
						duration:5000,
						type: 'warning',
						message: '数据重复！'
					});
				}


			},

			updateEnvirInfo(item, index) {
				this.list4show = false;
				this.form.applyEnvironmentList[index] = item;
				this.$nextTick(() => {
					this.list4show = true;
				});
			},

			updateApplySystem(item, index) {
				this.list1show = false;
				this.form.applySystemList[index] = item;
				this.$nextTick(() => {
					this.list1show = true;
				});
			},
			createApplyServer() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						console.info(this.form.requireApply.applySysNo)
						this.$refs.addApplyServer.showDialog(this.form.requireApply);
					} else {
						return false;
					}
				});
			},

			addApplyServer(item) {
				this.form.applyServerList.push(item);
			},
			updateApplyServer(item, index) {
				this.list2show = false;
				this.form.applyServerList[index] = item;
				this.$nextTick(() => {
					this.list2show = true;
				});
			},


			createApplySystemCall() {

				this.$refs["form"].validate(valid => {
					if (valid) {
						// this.$refs.serviceView.showDialog(this.form.requireApply.regSysNo);
						this.$refs.serviceView.showDialog(this.form.requireApply);
					} else {
						return false;
					}
				});

				//this.serviceViewVisible = true;
			},
			
			
			deleteApplySystemCall() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						this.$refs.serviceViewDel.showDialog(this.form.requireApply);
					} else {
						return false;
					}
				});
			},
			
			
			addApplySystemCall(row) {

				let obj = this.form.applySystemCallList.filter(item => {
					return item.transCode == row.transCode;
				})

				if (obj.length == 0) {
					let d = {};
					Object.assign(d, row);
					d.pubSysCode = this.form.requireApply.applySysNo;
					// d.regSysCode = this.form.requireApply.regSysNo;
					d.regCode = row.busCode;
					let system = this.$store.getters.getSystem(d.pubSysCode);
					if (system != null) {
						d.msgCode = system.msgCode;
						d.msgAgreement = system.msgAgreement;
					}
					
					d.requireType="01";
					d.regSysCode=d.systemNo;
					
					this.form.applySystemCallList.push(d);

				}
			},
			updateApplySystemCall(item, index) {
				this.list3show = false;
				this.form.applySystemCallList[index] = item;
				this.$nextTick(() => {
					this.list3show = true;
				});
			},
			
			delApplySystemCall(row) {
			
				let obj = this.form.applySystemCallList.filter(item => {
					return item.transCode == row.transCode;
				})
			
				if (obj.length == 0) {
					let d = {};
					Object.assign(d, row);
					d.pubSysCode = this.form.requireApply.applySysNo;
					// d.regSysCode = this.form.requireApply.regSysNo;
					d.regCode = row.busCode;
					let system = this.$store.getters.getSystem(d.pubSysCode);
					if (system != null) {
						d.msgCode = system.msgCode;
						d.msgAgreement = system.msgAgreement;
					}
					d.requireType="03";
					
					console.info(d);
					
					this.form.applySystemCallList.push(d);
			
				}
			},

			// //提交流程
			// submit() {
			// 	createProcess(this.form).then(response => {
			// 		if (response.data.code == "0000") {
			// 			this.$message.success(response.data.message);
			// 		} else {
			// 			this.$message.error(response.data.message);
			// 		}
			// 	}).catch(error => {
			// 		this.$message.error(error.message);
			// 	});
			// },

			getList() {
				selectAllByApplyId({
					id: this.id
				}).then(response => {
					let obj = response.data.extend;
					this.form.requireApply = obj.requireApply;
					this.form.applySystemList = obj.applySystemList
					this.form.applyServerList = obj.applyServerList
					this.form.applySystemCallList = obj.applySystemCallList
					this.fileList = [];
					obj.applyAppendixList.forEach(item => {
						this.fileList.push({
							name: item.fileName
						});
					})
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			/**
			 * 获取需求列表
			 */
			getRequirementList(query) {

				if (query != '') {
					this.qmsLoading = true;
					getRequirementInfoList({
						query: query
					}).then(response => {
						this.requirelist = response.data.extend;
						this.qmsLoading = false;
					});
				}

			},


			qmsChange(val) {
				this.form.requireApply.qmsName =
					this.requirelist.filter(item => {
						return item.qmsNo == val;
					})[0].qmsName;
				this.form.requireApply.mainSystemNo =
					this.requirelist.filter(item => {
						return item.qmsNo == val;
					})[0].mainSystemNo;
					
				getRequirementBatchNum({qmsNo:val}).then(response=>{
					this.form.requireApply.batchNum = response.data.extend;
				})	
					

			},



			//导入
			changeFile2(file, fileList) {

				var data = new FormData();
				data.append("file", file.raw);
				const loading = this.$loading({
					lock:true,
					text:'数据导入中，请稍后',
					spinner:'el-icon-loading',
					target:document.querySelector(".createApplyServer")
				})
				

				getFileByExcel(data).then(response => {

					if (response.data.code == '0000') {
						let flg = true;
						response.data.extend.forEach(item=>{
							
							if(item.systemNo!=this.form.requireApply.applySysNo){
								 flg = false;
							}
						})
						if(!flg){
							this.$message.error("系统编号和申请系统不一致,请检查文档");
							this.form.applyServerList= [];
						}else{
							this.form.applyServerList = response.data.extend;
							this.applyServerListCurrentPage = 1;
							
						}
						
						
					} else {
						this.$message.error(response.data.message);
					}
						this.fileList2 = [];
						loading.close();
				}).catch(error => {
					this.$message.error(error.message);
					console.info("失败");
					console.info(error.message);
					this.fileList2 = [];
					loading.close();
				});


			},

		},

	}
</script>

<style scoped>
	.detailsTitle {
		color: black;
		font-size: 20px;
		text-align: left;
		margin-top: 10px;
		margin-left: 0px;
		margin-bottom: 5PX;
		border-left: 3px solid rgba(28, 154, 81, 0.8);
		line-height: 22px;
		padding-left: 5px;
		color: rgba(28, 154, 81, 1);
		--background-image: linear-gradient(to right, rgba(28, 154, 81, 0.1), rgba(241, 241, 241, 0.1), rgba(247, 247, 247, 0.1));

	}

	.fileList {
		margin: 3px;
		line-height: 20px;
		font-size: 14px;
		padding-left: 5px;
		padding-right: 5px;
	}

	.fileList:hover {
		background-color: #eeeeee;
	}
	
	
</style>
<style>
	.el-alert__content{
		padding:0px
	}
	.el-alert__icon{
		margin-top: 3px;
	}
</style>
